<template>
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<hx-navbar v-if="showNav" title="保存海报" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
		</view> -->

		<vue-canvas-poster :widthPixels="820" :painting="painting" @success="posterSuccess"
			@fail="posterFail"></vue-canvas-poster>
		<!-- 分享 -->
		<uni-popup ref="shareBox" type="center" @maskClick="closedPage">
			<view style="position: relative; display: flex;flex-direction: column;align-items: center;">
				<canvas class="share_img">
					<img :src="posterSrc" class="share_img" />
				</canvas>
				<!-- #ifdef APP-PLUS -->

				<!-- #endif -->
				<!-- H5下载app -->
				<!-- #ifdef H5 -->
					<!-- <canvas class="share_img">
						<img :src="posterSrc" class="share_img" />
					</canvas> -->
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>

	import {
		h5Url
	} from '@/config/config.js';
	import {
		baseUrl
	} from '@/config/config.js';
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				showNav:false,
				posterSrc: '',
				painting: {
					width: '820px',
					height: '1084px',
					views: [{
						type: 'image',
						url: require('../../static/poster_black.png'),
						css: {
							width: '820px',
							height: '1084px',
						},
					}, ],
				},
			};
		},
		onLoad(options) {
			// this.posterUrl = url
			// this.downloadImageOfMp()
		},
		onShow() {
			let token = this.$db.get('userToken');
			if (token) {
				this.requestUserInfo()
			} else {

			}
		},
		methods: {
			closedPage(){
				console.log('关闭')
				uni.navigateBack()
			},
			posterSuccess(src) {
				console.log('海报成功'+this.posterSrc)
				this.posterSrc = src;
			},
			posterFail() {
				console.log('海报失败')
				uni.showToast({
					title: '生成海报失败',
					icon: 'none'
				});
			},
			requestUserInfo(){
				this.$api.userInfo({}, res => {
					if (res.status) {
						let profile = res.data;
						let inviteUrl = h5Url + '#/pages/login/register?invitecode=' + profile.uid + '&codeWay=normal';
						let qrcode = {
							type: 'qrcode',
							content: inviteUrl,
							css: {
								bottom: '392px',
								right: '260px',
								color: '#000',
								width: '300px',
								height: '300px',
								borderWidth: '20px',
								borderColor: '#FFF',
								background: '#FFF',
							}
						}
						// 修改海报背景
						if(this.ktheme == 'black'){
							this.painting.views[0].url = require('../../static/poster_black.png');
						}else{
							this.painting.views[0].url = require('../../static/poster.jpg');
						}
						this.painting.views.push(qrcode);
						this.$refs.shareBox.open()
						uni.showToast({
							title: '若长按保存图片失败,可以截图保存到相册',
							icon: 'none'
						},5000);
					}
				})
			},
			save: function() {
				// #ifdef H5
				this.down(this.posterSrc)
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				//	this.down(this.posterSrc)
					this.downloadImageOfMp(this.posterSrc)
				console.log("app")
				// #endif

			},
			down(imgsrc) {
				uni.downloadFile({
					url: imgsrc, // 图片的下载链接
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 临时文件路径
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'success'
									});
									console.log(": res.tempFilePath-----", res.tempFilePath)
								},
								fail: function(err) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
									console.error(err);
								}
							})
						}
					}
				});
			},
			downloadImageOfMp() {
				let _this = this
				console.log("下载图片---", this.posterSrc)
				_this.$common.successToShow('保存海报1')

				// 先下载到本地
				uni.downloadFile({
					url: _this.posterSrc,
				// uni.getImageInfo({
				// 	src:_this.posterUrl,
					success() {
						uni.saveImageToPhotosAlbum({
							filePath: _this.posterSrc,
							success() {
								_this.$common.successToShow('保存成功')
								uni.navigateBack(1)
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					}
				})
			},
		},
	}
</script>

<style>
	.share_img {
		width: 630rpx;
		height: 864rpx;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
	}

</style>
